Voorbereiden op de weergavemodi van morgen

PWA's kunnen de eigenschap "display_override" gebruiken om met speciale weergavemodi om te gaan.

Thomas Steiner

Een webapp-manifest is een JSON-bestand dat de browser informeert over je Progressive Web App en hoe deze zich moet gedragen wanneer deze wordt geïnstalleerd op de desktop of het mobiele apparaat van de gebruiker. Via de display eigenschap kun je aanpassen welke browserinterface wordt weergegeven wanneer je app wordt gestart. Je kunt bijvoorbeeld de adresbalk en de browserinstellingen verbergen. Games kunnen zelfs op volledig scherm worden weergegeven. Hieronder staan ​​kort de weergavemodi die waren ingesteld toen dit artikel werd geschreven.

Eigendom Gebruik
fullscreen Opent de webapplicatie zonder browserinterface en neemt het volledige beschikbare weergavegebied in beslag.
standalone Opent de webapp zodat deze eruitziet en aanvoelt als een zelfstandige app. De app draait in een eigen venster, los van de browser, en verbergt standaard gebruikersinterface-elementen van de browser, zoals de URL-balk.
minimal-ui Deze modus is vergelijkbaar met standalone , maar biedt de gebruiker een minimale set gebruikersinterface-elementen voor het besturen van de navigatie (zoals terug en opnieuw laden).
browser Een standaardbrowserervaring.

Deze weergavemodi volgen een duidelijk gedefinieerde fallback-keten ( "fullscreen" → "standalone" → "minimal-ui" → "browser" ). Als een browser een bepaalde modus niet ondersteunt, valt deze terug op de volgende weergavemodus in de keten.

Tekortkomingen van de display -eigenschap

Het probleem met deze hard-wired fallback-ketenbenadering is drieledig:

  • Een ontwikkelaar kan "minimal-ui" niet opvragen zonder terug te keren naar de weergavemodus van de "browser" als "minimal-ui" niet wordt ondersteund door een bepaalde browser.
  • Ontwikkelaars hebben geen manier om om te gaan met de verschillen tussen browsers, bijvoorbeeld als de browser een terugknop in het venster voor "standalone" modus toevoegt of weglaat.
  • Het huidige gedrag maakt het onmogelijk om nieuwe weergavemodi op een achterwaarts compatibele manier te introduceren, omdat verkenningen zoals de tabbladtoepassingsmodus geen natuurlijke plaats hebben in de terugvalketen.

De display_override eigenschap

Deze problemen worden opgelost met de eigenschap display_override , die de browser vóór de eigenschap display beschouwt. De waarde ervan is een reeks strings die in volgorde worden beschouwd, en de eerste ondersteunde weergavemodus wordt toegepast. Als er geen ondersteunde weergavemodus is, valt de browser terug op het evalueren van het display .

In het onderstaande voorbeeld ziet de fallback-keten voor de weergavemodus er als volgt uit. (De details van "window-controls-overlay" vallen buiten het bestek van dit artikel.)

  1. "window-controls-overlay" (Kijk eerst naar display_override .)
  2. "minimal-ui"
  3. "standalone" (Wanneer display_override uitgeput is, wordt display geëvalueerd.)
  4. "minimal-ui" (Gebruik ten slotte de display fallback-keten.)
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

Om achterwaarts compatibel te blijven, is elke toekomstige weergavemodus alleen acceptabel als een waarde van display_override , maar niet van display . Browsers die display_override niet ondersteunen, vallen terug op de eigenschap display en negeren display_override als een onbekende manifesteigenschap voor web-apps.

Dankbetuigingen

De eigenschap display_override is geformaliseerd door Daniel Murphy .